<template>
  <div class="content-wrapper">
    <el-dialog
      title="发起考核"
      :visible.sync="assessData.AssessDialog"
      class="mini"
      :modal-append-to-body="false"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="5vw"
      >
        <el-form-item
          v-if="BranchNameList.length > 0"
          label="考核部门"
          prop="name"
        >
          <el-tag
            v-for="(tag, index) in BranchNameList"
            :key="index"
            :disable-transitions="false"
            style="margin-right: 10px"
            @close="BranchList(tag)"
          >
            {{ tag.label }}
          </el-tag>
        </el-form-item>
        <el-form-item
          v-if="StaffNameList.length > 0"
          label="考核人员"
          prop="name"
        >
          <el-tag
            v-for="(tag, index) in StaffNameList"
            :key="index"
            :disable-transitions="false"
            style="margin-right: 10px"
            @close="StaffList(tag)"
          >
            {{ tag.label }}
          </el-tag>
        </el-form-item>
        <!-- 选择文件 -->
        <el-form-item
          v-if="assessData.row && assessData.row.assess !== 'practical'"
          label="选择试卷"
        >
          <el-tag
            v-if="testList.label"
            :disable-transitions="false"
            style="margin-right: 10px"
          >
            {{ testList.label }}
          </el-tag>
          <el-popover
            ref="popoverRef"
            placement="right"
            width="400"
            :v-model="popover"
          >
            <el-table :data="gridData" class="my-table" @row-click="selectTest">
              <el-table-column
                width="150"
                property="examinationPaperName"
                label="试卷名称"
              />
              <el-table-column
                width="100"
                property="passScore"
                label="通过分数"
              />
              <el-table-column
                width="100"
                property="numberOfExamsAllowed"
                label="考试次数"
              />
            </el-table>
            <el-button
              slot="reference"
              size="mini"
              round
              circle
              icon="el-icon-plus"
              @click="SelectTheFile"
            />
          </el-popover>
        </el-form-item>
        <!-- <el-form-item label="选择考核时间">
          <div class="block">
            <el-date-picker
              :disabled="disabled"
              v-model="Time"
              start-placeholder="开始日期"
              :default-time="['00:00:00']"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
        </el-form-item> -->
        <el-form-item>
          <el-button
            v-if="closable"
            type="primary"
            style="text-align: right"
            @click="pushSaveData"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import SearchPersonnel from '@/components/SearchUser/SearchPersonnel.vue'
import SearchUserList from '@/components/SearchUserList/index'
import SelectGroupList from '@/components/SelectGroupList/index.vue'
import { getMyLookData, startAssess } from '@/api/ts/train.js'
import { page } from '@/api/ts/paper.js'

export default {
  components: {
    SearchUserList,
    SelectGroupList,
    SearchPersonnel
  },
  props: ['assessData'],
  data() {
    return {
      title: '',
      dialogReview: false,
      pushMode: '',
      pushType: '',
      temp: {},
      rules: {},
      trainerUserName: '',
      TeacherIdList: [],
      BranchNameList: [],
      BranchIdList: [],
      StaffNameList: [],
      StaffIdList: [],
      Time: '',
      name: '',
      documentIds: [],
      content: '',
      closable: true,
      disabled: false,
      type: '',
      trainId: '',
      // 优化
      SelectGroupListData: {},
      SearchPersonnelData: {},
      SearchUserListData: {},
      SelectFileData: {},
      place: '',
      gridData: [],
      testList: {},
      popover: false
    }
  },
  watch: {
    assessData(data) {
      this.LookDataList(data.row.trainId)
      this.trainId = data.row.trainId
      this.trainName = data.row.name
      console.log(data,'wweeeeee');
    }
  },
  mounted() {},
  methods: {
    // 参与查看获取数据
    async LookDataList(id) {
      const { data } = await getMyLookData({ trainId: id })
      this.BranchNameList = data.trainUserGroupResponses
      this.StaffNameList = data.trainUserResponses
    },
    // 选择试卷
    SelectTheFile(row) {
      page({ status: 1 }).then((res) => {
        this.gridData = res.data.rows
        // this.popover = true
      })
    },
    // 提交考核
    pushSaveData() {
      console.log( this.assessData,'shhdghdshdsh');
      if (
        this.assessData.length > 0 &&
        this.assessData.row.assess !== 'practical'
      ) {
        if (!this.testList.examinationPaperId) {
          this.$message.warning('请选择试卷')
          return
        }
      }

      startAssess({
        examinationPaperId: this.testList.examinationPaperId || 0,
        trainId: this.trainId,
        trainName: this.trainName
      }).then((res) => {
        this.$message.success('发起考核成功')
        this.assessData.AssessDialog = false
      })
    },
    // =========================================
    // 选择部门（多选）
    UserGroupListData(data) {
      this.BranchNameList = data
      data.forEach((item) => {
        this.BranchIdList.push(item.id)
      })
    },
    // 选择人员（多选）
    SearchUserList(data) {
      this.StaffNameList = data
      data.forEach((item) => {
        this.StaffIdList.push(item.id)
      })
    },
    // 选择人员（单选）
    dataListData(data) {
      if (data) {
        this.trainerUserName = data[0].label
        this.TeacherIdList = data[0].id
      }
    },

    openReview(val, type, title) {
      // 0为角色 1为角色（总经理，总监） 3为架构 4为架构多选 5部门多选
      this.reviewWindow = val
      if (val == 3) {
        this.SearchPersonnelData = {
          dialogVisible: true
        }
      } else if (val == 4) {
        this.SearchUserListData = {
          dialogVisible: true
        }
      } else if (val == 5) {
        this.SelectGroupListData = {
          dialogVisible: true,
          temp: this.BranchNameList
        }
      }
    },
    selectTest(row) {
      this.testList = {
        label: row.examinationPaperName,
        examinationPaperId: row.examinationPaperId
      }
      this.$refs.popoverRef.doClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.my-table {
  height: auto;
}

//
</style>
